<template>
	<search-table
	  :columns="targetTeamCol4" 
	  :data="targetTeamData"
      :total="targetTeamTotal"
      :page.sync="queryTargetTeamInfo.pageIndex"
      :size.sync="queryTargetTeamInfo.pageSize"
      @change-page="getTargetPage"
	  @change-size="getTargetSize"
    >
	<template slot="search">
		<Input v-model.trim="queryTargetTeamInfo.teamName"  placeholder="请输入团队名称" style="width: 180px;margin-right:15px;"  clearable @on-change="searchTargetTeam"  />
	</template>
	<Modal v-model="showTargetInfoModel"
               title="题目详情"
               width="1000"
               :mask-closable = "false"
               footer-hide
        >
            <Row class="targetHeader">
                <Input v-model.trim="targetInfoQuery.targetName"  placeholder="请输入题目名称" style="width: 180px;margin-right:15px;"  clearable @on-change="searchTeamInfo"  />
                <Select filterable v-model="targetInfoQuery.status" placeholder="请选择解决状态"  style="width: 150px;margin-right:15px;" @on-change="searchTeamInfo" clearable>
                    <Option :value="1">未解决</Option>
                    <Option :value="2">已解决</Option>
                </Select>
                <Page :total=teamInfoTotal
                      :page-size="targetInfoQuery.pageSize"
                      show-total show-elevator @on-page-size-change="getTargetInfoSize"
                      @on-change="getTargetInfoPage" style="float: right">
                </Page>
            </Row>
            <TableList :columns="teamInfoCol" :data="teamInfoData"></TableList>
        </Modal>
        <Modal v-model="reportGradeModal.show"
               :title="reportGradeModal.title"
               :mask-closable="false"
               :loading="reportGradeModal.loading"
               @on-ok="reportGrade('gradeValidate')"
               @on-cancel="handleReset('gradeValidate')"
               width="400px">
            <Form ref="gradeValidate" :model="gradeValidate" :rules="ruleChalValidate" :label-width="80">
                <FormItem label="评分" prop="score">
                    <InputNumber type="textarea" v-model="gradeValidate.score" :min="1" :max="curTarget.score" :placeholder="'输入1~'+curTarget.score+'的数字'" style="width:200px"></InputNumber>
                    <!--<p style="color:#ff9900" v-if="hasApplyTag"> <Icon type="ios-information-circle-outline" />该题已经申请过提示，最高得分只能是该题目满分的一半</p>-->
                </FormItem>
            </Form>
        </Modal>
        <Modal v-model="pdfModal"
               title="pdf预览"
               width="800px"
               :mask-closable = "false"
               footer-hide
        >
            <iframe :src="pdfUrl" width="100%" height="600px" scrolling="none" frameborder="0"></iframe>
        </Modal>
		</search-table>
</template>

<script>
	import {getTargetTeamList,addTargetTeam,modifyTargetTeam,getTargetTeamInfo,delTargetTeam,queryVmWithParty,queryTargetAllot,
		submitFlag,reportGrade,ctfReport,getTeamListER} from '@/api/drill_compete'
	import {queryCtfList} from '@/api/question'
	import {getaccessgrouplist} from '@/api/access_new'
	export default {
		name: "teamAttack",
		props:['type','poll','drillDetail'], //接受演练竞赛类型
		components:{},
		data(){
			const validateScore = (rule,value,callback) => {
				let _this = this;
				let score = _this.curTarget.score;
				if((value && (value > score || value < 1)) || value === 0){
					callback(new Error(`请输入1~${score}的数字`));
				}else{
					callback()
				}
			}
			return{
				targetTeamCol4:[
					{
						title:'队伍名称',
						key:'teamName',
						align:'center',
						ellipsis:true,
						tooltip:true,
						width:100,
						placement:'top-left'
					},
					{
						title:'完成数量',
						key:'finishCount',
						align:'center',
						ellipsis:true,
						tooltip:true,
						width:100,
					},
					{
						title:'未完成数量',
						key:'notFinishCount',
						align:'center',
						ellipsis:true,
						tooltip:true,
						width:100,
					},
					{
						title:'攻击得分',
						key:'attackScore',
						align:'center',
						ellipsis:true,
						tooltip:true,
						width:60
					},
					{
						title:'操作',
						align:'center',
						width:200,
						placement:'top-right',
						action:true,
						render:(h,params) => {
							let _this = this;
							console.log(_this.drillDetail);
							return h('div',[
								h('Button',{
									props:{
										type:'primary',
										size:'small',
										disabled:params.row.isNeedSubmitFlag || (!params.row.fileId)
									},
									style:{
										marginRight:'5px'
									},
									on:{
										click:()=>{
										}
									}
								},[
									h('a',{
										attrs:{
											href:"/api/minio/download/" + params.row.fileId,
											download:'',
											//				                			href: `../../Learn${path}`
										},
										style:{
											color:params.row.isNeedSubmitFlag || (!params.row.fileId) ? '#c5c8ce' : '#fff'
										}
									},'下载')
								]),
								h('Button',{
									props:{
										type:'primary',
										size:'small',
										disabled:params.row.isNeedSubmitFlag || (!params.row.fileId)
									},
									style:{
										marginRight:'5px'
									},
									on:{
										click:()=>{
											//新的预览接口
									    	window.open(`/api/minio/filePreview?id=${params.row.fileId}`);
									    	return;
											let reviewUrl = `/api/ftp/edu-ftp/viewOnline/pdf/${params.row.fileId}`;//${params.row.fileId}
											this.pdfUrl = `static/pdfjs/web/viewer.html?file=${encodeURIComponent(reviewUrl)}`
											// this.showTeamInfoModel = false;
											this.pdfModal = true;
										}
									}
								},"预览"),
								h('Button',{
									props:{
										type:'primary',
										size:'small',
									},
									style:{
										marginRight:'5px',
										width:'60px'
									},
									on:{
										click:()=>{
											this.showTargetInfo(params.row)
										}
									}
								},'题目信息')
							])
						}
					}
				],
				targetTeamData:[],
				targetTeamTotal:0,
				queryTargetTeamInfo:{
					pageIndex:1,
					pageSize:10,
					teamName:''
				},
				gradeValidate:{
					"questionId": "",
					"sceneId": this.$route.query.id,
					"score": 0,
					"teamId": ""
				},
				curTarget:{},
				reportGradeModal:{
					show:false,
					title:'评分',
					loading:true
				},
				showTargetInfoModel:false,
				teamInfoTotal:0,
				teamInfoCol:[
					{
						title:'题目名称',
						key:'targetName',
						align:'center',
						ellipsis:true,
						tooltip:true,
						width:100,
						placement:'top-left'
					},
					{
						title:'题目镜像',
						key:'imageName',
						align:'center',
						ellipsis:true,
						tooltip:true,
						width:100,
					},
					{
						title:'解决状态',
						key:'status',
						align:'center',
						ellipsis:true,
						tooltip:true,
						render:(h,params)=>{
							return h('Tag',{
								props:{
									color:this.handlerStatus(params.row.status).color
								}
							},this.handlerStatus(params.row.status).txt)
						}
					},
					{
						title:'分值',
						key:'score',
						align:'center',
						ellipsis:true,
						tooltip:true,
						width:60
					},
					{
						title:'IP',
						key:'ip',
						align:'center',
						ellipsis:true,
						tooltip:true,
						width:100
					},
					{
						title:'端口',
						key:'port',
						align:'center',
						ellipsis:true,
						tooltip:true,
						width:60
					},
                    {
                    	title:'得分',
                        key:'grade',
	                    align:'center',
	                    ellipsis:true,
	                    tooltip:true,
	                    width:60,
                        render:(h,params)=>{
                    		return h('span',params.row.isNeedSubmitFlag==='1'?'无':params.row.grade? params.row.grade : 0)
                        }
                    },
                    {
                    	title:'操作',
	                    align:'center',
	                    width:200,
	                    placement:'top-right',
	                    action:true,
                        render:(h,params)=>{
                    		return h('div',[
			                    h('Button',{
				                    props:{
					                    type:'primary',
					                    size:'small',
					                    disabled:params.row.isNeedSubmitFlag==='1'
				                    },
				                    style:{
					                    marginRight:'5px',
					                    width:'60px'
				                    },
				                    on:{
					                    click:()=>{
						                    this.gradeValidate.score = 1;
						                    this.gradeValidate.questionId = params.row.id;
						                    this.gradeValidate.teamId = params.row.teamId;
						                    this.curTarget = params.row;
						                    this.reportGradeModal.show = true;
					                    }
				                    }
			                    },'评分'),
                            ])
                        }
                    }
				],
				teamInfoData:[],
				currentTargetId:'',
				targetInfoQuery:{
					pageIndex:1,
					pageSize:10,
					teamId:'',
					sceneId:this.$route.query.id,
					status:0,
					targetName:''

				},
				pdfUrl:'',
				pdfModal:false,
				ruleChalValidate:{
					chaId:[
						{ required: true, message: '请选择题目', trigger: 'change' },
					],
					flag:[
						{ required: true, message: '请输入Flag', trigger: 'change' },
					],
					score:[
						{ required: true, type:'number',message: '请输入分数', trigger: 'change' },
						{ validator: validateScore, trigger: 'change' }
					],
				},
				curTarget:{},
			}
		},
		mounted(){
			this.getTargetListEr()
		},
		methods:{
			getTargetListEr(){
				getTeamListER(this.$route.query.id,this.queryTargetTeamInfo).then(res=>{
					if(res.code===1){
						this.targetTeamData = res.data.items;
						this.targetTeamTotal = res.data.total;
					}else{
						this.$Message.error(res.message)
					}
				})
			},
			getTargetSize(size){
				this.queryTargetTeamInfo.pageSize = size;
				this.getTargetListEr()

			},
			getTargetPage(page){
				this.queryTargetTeamInfo.pageIndex = page;
				this.getTargetListEr()
			},
			searchTargetTeam(){
				this.queryTargetTeamInfo.pageIndex = 1;
				this.getTargetListEr()
			},
			showTargetInfo(obj){
				this.showTargetInfoModel = true;
				this.currentTargetId = obj.teamId;
				this.targetInfoQuery={
					pageIndex:1,
					pageSize:10,
					teamId:'',
					sceneId:this.$route.query.id,
					targetName:'',
                    status:0
				},
					this.getTargetInfo();
			},
			getTargetInfo(){
				let params = {...this.targetInfoQuery};
				params.teamId = this.currentTargetId;
				if(params.status===0){
					delete params.status;
                }
				queryTargetAllot(params).then(res=>{
					if(res.code === 1){
						this.teamInfoData = res.data.items;
						this.teamInfoTotal = res.data.total;
					}else{
						this.$Message.error(res.message)
					}
				})
			},
			getTargetInfoSize(size){
				this.targetInfoQuery.pageSize = size;
				this.getTargetInfo()
			},
			getTargetInfoPage(page){
				this.targetInfoQuery.pageIndex = page;
				this.getTargetInfo()
			},
			searchTeamInfo(){
				this.targetInfoQuery.pageIndex = 1;
				this.getTargetInfo()
			},
			handlerStatus(status){
				const mapColor = {
					1:'red',
					2:'green'
				};
				const mapTxt = {
					1:'未解决',
					2:'已解决'
				}
				return{
					color:mapColor[status],
					txt:mapTxt[status]
				}
			},
			openTeamInfo(){
				this.showTargetInfoModel = true;
			},
			reportGrade(){
				this.$refs.gradeValidate.validate((valid) => {
					if(valid){
						reportGrade(this.gradeValidate).then(data => {
							if(data.code == 1){
								this.reportGradeModal.show = false;
								this.$Message.info('操作成功');
								this.getTargetInfo();
                                this.getTargetListEr()
							}else{
								this.reportGradeModal.loading = false;
								setTimeout(()=>{
									this.reportGradeModal.loading = true;
								},500)
								this.$Message.warning(data.message);
							}
						}).catch(error => {
							this.reportGradeModal.loading = false;
							setTimeout(()=>{
								this.reportGradeModal.loading = true;
							},500)
							this.$Message.error(error.response.data.message);
						})
					}else{
						this.reportGradeModal.loading = false;
						setTimeout(()=>{
							this.reportGradeModal.loading = true;
						},500)
					}
				}).catch(() => {
					this.reportGradeModal.loading = false;
					setTimeout(()=>{
						this.reportGradeModal.loading = true;
					},500)
				})
			},
			handleReset (name) {
				this.$refs[name].resetFields();
			},
		}
	}
</script>

<style scoped>
    .targetHeader{
        /*padding: 10px;*/
        margin:15px 0;
    }
</style>
